﻿@{
    ViewBag.Title = "NegativeColWidgetDemo";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Negative Column Widget Demo</h2>

<div id="container" style="width: 800px; height: 500px; margin: 0 auto"></div>

<script type="text/javascript" src="/JS/ZeusApp/lordjs.negColDemoWidget.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var categories = [
                    2008,
                    2009,
                    2010,
                    2011,
                    2012,
                    2013,
                    2014,
                    2015,
                    2016,
                    2017,
                    2018
                ];

        var series = [
            {
                name: 'Import',
                data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300]
            }, 
            {
                name: 'Export',
                data: [-200, 200, -200, -400, -400, -200, -200, -200, -200, 200, -200]
            }, 
            {
                name: 'Net trade',
                data: [200, 200, 200, -100, -100, 200, 200, 200, 200, 200, 200]
            }
        ];

        $('#container').negColDemoWidget({
            containerId: 'container',
            title: 'Supply & Demand - Benzene Europe',
            yTitle: 'KT',
            categories: categories,
            series: series
        });
    });
</script>